<!-- 图层列 -->
<template>
	<div class="layer-comp">
		<div class="layer-toolbar layer-toolbar-top">
			<div class="head_btns">
				<el-tooltip effect="dark" content="上移" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-top" @click="handleStepTop" :disabled="activeCompsIndex.length !== 1"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" content="下移" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-bottom" @click="handleStepBottom" :disabled="activeCompsIndex.length !== 1"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" content="置顶" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-upload2" @click="handleTop" :disabled="activeCompsIndex.length !== 1"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" content="置底" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-download" @click="handleBottom" :disabled="activeCompsIndex.length !== 1"></el-button>
				</el-tooltip>
			</div>
		</div>
		<draggable :group="{ name: 'form' }" ghost-class="ghost" :list="nav" :animation="300" class="layerMenu">
			<div v-for="item in nav" :key="item">
				<!-- 成组 -->
				<div class="menu__folder" v-if="item.children">
					<div
						@dblclick="hangeChangeName(item)"
						v-contextmenu="{
							id: contain.menuId,
							event: contain.handleContextMenu,
							value: item
						}"
						:class="[
							'menu__item--folder',
							{
								'is-active': handleGetActive(item),
								'is-over': contain.overactive === item.index
							}
						]"
					>
						<i class="iconfont icon-fold" @click="openFolder(item)" :class="{ 'is-active': item.menu }"></i>
						<i class="iconfont icon-folder" @click="handleSetActive(item)"></i>
						<input style="width: 80px" type="text" @keyup.enter="item.isname = false" v-if="item.isname" v-model="item.name" />
						<span v-else style="width: 80px">{{ item.name }}</span>
					</div>
					<div :key="'list' + item.index" class="menu__list" v-show="item.menu">
						<draggable :group="{ name: 'form' }" ghost-class="ghost" :list="item.children" :animation="300">
							<template v-for="citem in item.children">
								<div
									v-if="!citem.children"
									:key="citem.index"
									:class="[
										'menu__item',
										{
											'is-active': handleGetActive(citem),
											'is-over': contain.overactive === citem.index
										}
									]"
									@click="handleSetActive(citem)"
									v-contextmenu="{
										id: contain.menuId,
										event: contain.handleContextMenu,
										value: citem
									}"
									@mouseover="contain.overactive = citem.index"
									@mouseout="contain.overactive = undefined"
								>
									<span class="menu__icon">
										<i :class="'iconfont ' + citem.icon"></i>
									</span>
									<span>{{ citem.name }}</span>
								</div>
								<layer v-else :count="count + 1" :key="citem.index" :nav="[citem]"></layer>
							</template>
						</draggable>
					</div>
				</div>
				<!-- 单列 -->
				<div
					v-else
					v-contextmenu="{
						id: contain.menuId,
						event: contain.handleContextMenu,
						value: item
					}"
					@click="handleSetActive(item)"
					:class="[
						'menu__item',
						{
							'is-active': handleGetActive(item),
							'is-over': contain.overactive === item.index,
							'is-text': showType.textVersion
						}
					]"
					@mouseover="contain.overactive = item.index"
					@mouseout="contain.overactive = undefined"
				>
					<span class="menu__icon" v-if="showType.thumbnailVersion">
						<i :class="'iconfont ' + item.icon"></i>
					</span>
					<span class="menu__name" :title="item.name">{{ item.name }}</span>
					<div class="layer-thumbail-item">
						<i v-if="item.isLock" class="lockIcon el-icon-lock"></i>
						<i v-if="!item.display" class="lockIcon el-icon-view"></i>
					</div>
				</div>
			</div>
		</draggable>
		<div class="layer-toolbar layer-toolbar-top">
			<div class="head_btns">
				<el-tooltip effect="dark" content="成组" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-folder" @click="handleGroup" :disabled="!activeCompsIndex.length"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" content="删除" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-delete" @click="handleDelete" :disabled="!activeCompsIndex.length"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" :content="lockStatus ? '解锁' : '锁定'" placement="top">
					<el-button size="mini" type="primary" :icon="lockStatus ? 'el-icon-unlock' : 'el-icon-lock'" @click="handleLock" :disabled="!activeCompsIndex.length"></el-button>
				</el-tooltip>
			</div>
			<div class="head_btns">
				<el-tooltip effect="dark" :content="displayStatus ? '隐藏' : '显示'" placement="top">
					<el-button size="mini" type="primary" icon="el-icon-view" @click="handleDisplay" :disabled="!activeCompsIndex.length"></el-button>
				</el-tooltip>
			</div>
		</div>
	</div>
</template>

<script>
import vuedraggable from 'vuedraggable';
import { mapState, mapGetters } from 'vuex';
// import MonacoEditor from '@/page/components/editor';
import { addComp } from '@/api/componentList';
import common from '@/config';
export default {
	name: 'layer',
	inject: ['contain'],
	provide() {
		return {
			contain: this.contain
		};
	},
	components: {
		// MonacoEditor,
		draggable: vuedraggable
	},
	computed: {
		...mapState({
			activeComps: state => state.activeComps,
			compsList: state => state.compsList
		}),
		...mapGetters(['activeCompsIndex']),
		lockStatus() {
			return this.activeComps.every(comp => comp.isLock === true);
		},
		displayStatus() {
			return this.activeComps.every(comp => comp.display === true);
		}
	},
	props: {
		count: {
			type: Number,
			default: 1
		},
		nav: {
			type: Array,
			default: () => {
				return [];
			}
		},
		showType: {
			type: Object
		}
	},
	data() {
		return {
			common: common
		};
	},
	methods: {
		handleGetActive(item) {
			return this.activeCompsIndex.includes(item.index);
		},
		handleSetActive(item) {
			if (item.children) {
				let list = item.children.map(ele => ele.index);
				this.contain.selectNav(list);
			} else {
				this.$store.commit('setActiveComps', {
					isKeysCtrl: this.contain.isKeysCtrl,
					...item
				});

				if (this.activeCompsIndex && this.activeCompsIndex[0]) {
					let refIndex = `${this.common.DEAFNAME}${this.activeCompsIndex[0]}`;
					let baseDom = document.querySelectorAll('.groupArea .avue-draggable');
					baseDom.forEach(dom => {
						dom.classList.remove('avue-draggable--active');
						let lineDom = dom.querySelectorAll('.avue-draggable__wrapper .avue-draggable__line');
						let rangeDom = dom.querySelectorAll('.avue-draggable__wrapper .avue-draggable__range');

						lineDom.forEach(lDom => {
							lDom.style.display = 'none';
						});
						rangeDom.forEach(rDom => {
							rDom.style.display = 'none';
						});
					});
					let selectDom = document.querySelectorAll(`#${refIndex}`);
					selectDom[0].classList.add('avue-draggable--active');
				}
			}
		},
		hangeChangeName(item) {
			this.$set(item, 'isname', !item.isname);
		},
		openFolder(item) {
			this.$set(item, 'menu', !item.menu);
			item.isname = false;
		},
		// 图层的上下移动方法
		handleCommon(top = false, step = false) {
			this.activeComps.forEach(ele => {
				let { itemList, itemIndex } = this.contain.findnav(ele.index);
				let obj = itemList.splice(itemIndex, 1)[0];
				if (step) {
					itemList.splice(top ? itemIndex - 1 : itemIndex + 1, 0, obj);
				} else {
					itemList[top ? 'unshift' : 'push'](obj);
				}
			});
		},
		handleTop() {
			let len = this.compsList.length - 1;
			if (this.activeComps[0].zIndex == this.compsList.length - 1) {
				this.$message.warning(`当前组件${this.activeComps[0].name}已处于最高层级！`);
				return false;
			} else {
				let compsIndex = this.compsList.findIndex(comp => comp.index == this.activeCompsIndex[0]);
				let obj = this.compsList.splice(compsIndex, 1)[0];
				this.compsList.unshift(obj);
				this.compsList.forEach((ele, index) => (ele.zIndex = len - index));
				this.$store.commit('setActiveComps', {
					isKeysCtrl: this.contain.isKeysCtrl,
					...obj
				});
			}
		},
		handleBottom() {
			let len = this.compsList.length - 1;
			if (this.activeComps[0].zIndex == 0) {
				this.$message.warning(`当前组件${this.activeComps[0].name}已处于最低层级！`);
				return false;
			} else {
				let compsIndex = this.compsList.findIndex(comp => comp.index == this.activeCompsIndex[0]);
				let obj = this.compsList.splice(compsIndex, 1)[0];
				this.compsList.push(obj);
				this.compsList.forEach((ele, index) => (ele.zIndex = len - index));
				this.$store.commit('setActiveComps', {
					isKeysCtrl: this.contain.isKeysCtrl,
					...obj
				});
			}
		},
		handleStepTop() {
			let len = this.compsList.length - 1;
			if (this.activeComps[0].zIndex == this.compsList.length - 1) {
				this.$message.warning(`当前组件${this.activeComps[0].name}已处于最高层级！`);
				return false;
			} else {
				let compsIndex = this.compsList.findIndex(comp => comp.index == this.activeCompsIndex[0]);
				let obj = this.compsList.splice(compsIndex, 1)[0];
				this.compsList.splice(compsIndex - 1, 0, obj);
				this.compsList.forEach((ele, index) => (ele.zIndex = len - index));
				this.$store.commit('setActiveComps', {
					isKeysCtrl: this.contain.isKeysCtrl,
					...obj
				});
			}
		},
		handleStepBottom() {
			let len = this.compsList.length - 1;
			if (this.activeComps[0].zIndex == 0) {
				this.$message.warning(`当前组件${this.activeComps[0].name}已处于最低层级！`);
				return false;
			} else {
				let compsIndex = this.compsList.findIndex(comp => comp.index == this.activeCompsIndex[0]);
				let obj = this.compsList.splice(compsIndex, 1)[0];
				this.compsList.splice(compsIndex + 1, 0, obj);
				this.compsList.forEach((ele, index) => (ele.zIndex = len - index));
				this.$store.commit('setActiveComps', {
					isKeysCtrl: this.contain.isKeysCtrl,
					...obj
				});
			}
		},
		handleGroup() {
			this.$message.warning('此功能暂未开放！');
		},
		handleDelete() {
			this.$confirm(`是否批量删除${this.activeComps.map(comp => comp.name).join(',')} 共${this.activeComps.length}个组件?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.activeComps.forEach(comp => {
					let { itemList, itemIndex } = this.contain.findnav(comp.index);
					itemList.splice(itemIndex, 1);
				});
				this.$store.commit('clearActiveComps');
				this.$refs.container.handleHideArea(); // 清除框选
			});
		},
		handleLock() {
			let lockStatus = this.lockStatus;
			this.activeComps.map(ele => {
				let compsIndex = this.compsList.findIndex(comp => comp.index == ele.index);
				ele.isLock = !lockStatus;
				this.$set(this.compsList[compsIndex], 'isLock', !lockStatus);
			});
		},
		handleDisplay() {
			let displayStatus = this.displayStatus;
			this.activeComps.map(ele => {
				let compsIndex = this.compsList.findIndex(comp => comp.index == ele.index);
				ele.display = !displayStatus;
				this.$set(this.compsList[compsIndex], 'display', !displayStatus);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.layer-toolbar {
	padding: 0 10px;
	height: 30px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&:first-child {
		border-bottom: 1px solid #282f3a;
	}
	&:last-child {
		border-top: 1px solid #282f3a;
	}
	.head_btns {
		width: 30px;
		height: 22px;
		.el-button {
			width: 100%;
			height: 22px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #282f3a;
			border-color: #282f3a;
			&.is-disabled {
				opacity: 0.3;
			}
		}
	}
}
</style>
